<template>
	<view>
		 	<scroll-view :scroll-top="0" scroll-y="true"  style="height: 800rpx;"  >
							
		<view>
			<fui-row margin-bottom="24rpx">
				<fui-col>
					<view class=" fui-color__white">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
										:duration="duration" >
										<view v-for="(cc,index) in carouselList" :key="index">
										<swiper-item>  
											<view class="swiper-item uni-bg-red">
												  <image   :src="this.$request.baseUrl+cc.carouselPath"/>
											</view>
										</swiper-item>
										</view>
							</swiper>
					</view>
				 
				
				
				</fui-col>
				
			</fui-row>
			<view style="display:flex; justify-content: space-around;">
					<view   @click="toPage('/pages/views/mySeek?type=1')">场馆介绍</view>
					<view  @click="toPage('/pages/views/contestmakeList')" >约比赛</view>
					<view  @click="callMobile()">联系我们</view>
			</view>
				<fui-tabs :tabs="tabsList" @change="change"  isDot scroll alignLeft></fui-tabs>
				<view v-if="tabsIndex === 0">
							 <view  class=" fui-color__white">
							 	 <scroll-view class="myScoll"  scroll-x   >
									 
							 	   <view class="row" style="display: ruby;" v-for="(item,index) in courseList" :key="index">
									 
										   <view  class="shadow-div" >
											   <view style="display: grid;">
												   <fui-avatar size="large" :src="this.$request.baseUrl+item.masterFootballIcon" radius="30"/>
												    {{item.masterFootballName}}
												    {{item.courseMasterTeamNum }}
											   </view>
											  <view>
												   <view><div>VS</div> <div>{{item.coruseStatus }}</div></view>
											   </view>
											   <view style="display: grid;">
												    {{item.courseAwayTeamNum }}
												   <fui-avatar size="large" :src="this.$request.baseUrl+item.awayFootballIcon" radius="30"/>
												   {{item.awayFootballName}}
											   </view>
										
										</view>
					
								   </view>
							 	    
							 	 </scroll-view>
							 </view>
							  <view  class=" fui-color__white">
							 <fui-card   title="最新视频" tag="查看更多>" @click="toPage('/pages/views/videoList')"  >
							 
								 <view  v-for="(item,index) in newVideos" :key="index">
							
							 	 <fui-row margin-bottom="24rpx">
							 	 	<fui-col :span="12">
							 	 		<view v-if="index%2==0" class="video-container" >
											 <view class="video-title">{{newVideos[index].videoName}}</view>
										<video 
										  :id="'videId'+ newVideos[index].id"
										:src="this.$request.baseUrl+newVideos[index].videoPath"
											:poster='this.$request.baseUrl+newVideos[index].videoConverPath'
											 @play="playVedio('videId'+ newVideos[index].id)"
											 enable-danmu danmu-btn controls />
											  <view class="video-title">{{newVideos[index].courseMasterTeam}} vs{{newVideos[index].courseAwayTeam}}</view>
									 
										</view>
							 	 	</fui-col>
							 	 	<fui-col :span="12">
							 	 		<view v-if="index%2==0"  class="video-container">
											<view class="video-title">{{newVideos[index+1].videoName}}</view>
												 	 <video 
													  :id="'videId'+ newVideos[index+1].id"
													 :src="this.$request.baseUrl+newVideos[index+1].videoPath"
												 	:poster='this.$request.baseUrl+newVideos[index+1].videoConverPath'
													 @play="playVedio('videId'+ newVideos[index+1].id)"
													  enable-danmu danmu-btn controls/>
										 <view class="video-title">{{newVideos[index+1].courseMasterTeam}} vs{{newVideos[index+1].courseAwayTeam}}</view>
										</view>
							 	 	</fui-col>
							 	 </fui-row>
							 	  </view>
							 </fui-card>
							 <fui-card   title="热门视频" tag="查看更多>" @click="toPage('/pages/views/videoList')">
							 	 <view  v-for="(item,index) in hotVideos" :key="index">
							 	 <fui-row margin-bottom="24rpx">
							 	 	<fui-col :span="12">
							 	 		<view v-if="index%2==0" class="video-container" >
							 	 			 <view class="video-title">{{newVideos[index].videoName}}</view>
							 	 				<video 
							 	 				:id="'videId'+ newVideos[index].id"
							 	 				:src="this.$request.baseUrl+newVideos[index].videoPath"
							 	 				:poster='this.$request.baseUrl+newVideos[index].videoConverPath'
							 	 				@play="playVedio('videId'+ newVideos[index].id)"
							 	 				enable-danmu danmu-btn controls />
										 <view class="video-title">{{hotVideos[index].courseMasterTeam}} vs{{hotVideos[index].courseAwayTeam}}</view>
							 	 				</view>
							 	 	</fui-col>
							 	 	<fui-col :span="12">
							 	 		<view v-if="index%2==0"  class="video-container">
							 	 		<view class="video-title">{{newVideos[index+1].videoName}}</view>
							 	 		<video 
							 	 		:id="'videId'+ newVideos[index+1].id"
							 	 		:src="this.$request.baseUrl+newVideos[index+1].videoPath"
							 	 		:poster='this.$request.baseUrl+newVideos[index+1].videoConverPath'
							 	 		 @play="playVedio('videId'+ newVideos[index+1].id)"
							 	 		enable-danmu danmu-btn controls/>
									 <view class="video-title">{{hotVideos[index+1].courseMasterTeam}} vs{{hotVideos[index+1].courseAwayTeam}}</view>
							 	 		</view>
							 	 	</fui-col>
							 	 </fui-row>
							 	  </view>
							 </fui-card>
							 <fui-card   title="热门咨询" tag="查看更多>" @click="toPage('/pages/views/seekList')">
							 	<view class="fui-card__content">
									<view v-for="(item,index) in seekList" :key="index">
										
									<fui-list-cell>
										<view>
										<view>{{item.seekName}}</view>
										<view>{{item.seekSubName}}</view>
										<view>{{item.seekAuth}}</view>
										<view>{{item.createTime}}</view>
										</view>
										<view class="fui-text__explain">
											  <image style="width: 200rpx;height: 200rpx;"  :src="this.$request.baseUrl+item.seekConver"/>
										</view>
									</fui-list-cell>
									 
									 
									</view>
									
								</view>
							 </fui-card>
							 </view>
							</view>
				<view v-if="tabsIndex === 1" style="height: 1000rpx;">
				<z-paging ref="paging" :fixed="false" v-model="voidePageDataList" @query="queryList" :default-page-size="10">
					<view  v-for="(item,index) in voidePageDataList" :key="index">		
					<fui-row margin-bottom="24rpx">
						<fui-col :span="12">
							<view v-if="index%2==0" class="video-container" >
							 <view class="video-title">{{voidePageDataList[index].videoName}}</view>
								<video 
								 :id="'videId'+ voidePageDataList[index].id"
								:src="this.$request.baseUrl+voidePageDataList[index].videoPath"
								:poster='this.$request.baseUrl+voidePageDataList[index].videoConverPath'
								 @play="playVedio('videId'+ voidePageDataList[index].id)"
								 enable-danmu danmu-btn controls />
								 <view class="video-title">{{voidePageDataList[index].courseMasterTeam}} vs{{voidePageDataList[index].courseAwayTeam}}</view>
							</view>
						</fui-col>
						<fui-col :span="12">
							<view v-if="index%2==0"  class="video-container">
							<view class="video-title">{{voidePageDataList[index+1].videoName}}</view>
					 
							<video  
							:id="'videId'+ voidePageDataList[index+1].id"
							:src="this.$request.baseUrl+voidePageDataList[index+1].videoPath"
							:poster='this.$request.baseUrl+voidePageDataList[index+1].videoConverPath'
							 @play="playVedio('videId'+ voidePageDataList[index+1].id)"
								 enable-danmu danmu-btn controls/>
							  <view class="video-title">{{voidePageDataList[index+1].courseMasterTeam}} vs{{voidePageDataList[index+1].courseAwayTeam}}</view>
								
							</view>
							 
						</fui-col>
					</fui-row>
					 </view>
				</z-paging> 
				</view>
						 
		</view>
		 </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 background: ['color1', 'color2', 'color3'],
				 indicatorDots: true,
				 autoplay: true,
				interval: 2000,
				duration: 500,
				tabsIndex: 0, // 控制tabs的index
				tabsList: [{name:""}],
				queryForm:{
					 pageNum:1,
					pageSize:10,
					param:{
						videoType:""
					}
				},
				carouselList:[],
				courseList:[],
				newVideos:[],
				hotVideos:[],
				seekList:[],
				videoContext:'',
				voidePageDataList:[],
			 
			}
		},
		onLoad() {
	
			this.ininHOmeData();
		},
		methods: {
			callMobile(){
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			queryList(pageNo, pageSize) {
				this.queryForm.pageNum=pageNo;
				this.queryForm.pageSize=pageSize;
				 this.$request.post('video/list',this.queryForm).then(res => {
				 	 this.$refs.paging.complete(res.data.dataList);
				 }).catch(res => {
			    	 
			    	this.$refs.paging.complete(false);
			    })
			},
			
		change(e) {
			let index= e.index;
			if(index==0){
				this.tabsIndex=index;
			}else{
				this.tabsIndex=1
				this.queryForm.param.videoType=index;
				this.$refs.paging.reload();
			}
			
		},
		toPage(paths){
			uni.navigateTo({
				url: paths
			});
		},
			ininHOmeData(){
				this.$request.get('dict/getListByType/contest_type', {}).then(res => {
				  let arr=  res.data;
				  for (let value of arr) {
					this.tabsList.push({
						name:value.dictLabel
					})
				  }
				  this.tabsList.splice(0, 1)
				})
				//轮播
				this.$request.post('carousel/list', this.queryForm).then(res => {
				  if(res.code ==200){
					  this.carouselList=res.data.dataList;
					   
				  }
				})
				//比赛
				this.$request.post('course/list', this.queryForm).then(res => {
				  if(res.code ==200){
					  this.courseList=res.data.dataList;
					  
					   
				  }
				})
				//最新视频
				this.$request.post('video/list', this.queryForm).then(res => {
				  if(res.code ==200){
					  this.newVideos=res.data.dataList;
					 
				  }
				})
				//最热视频
				this.queryForm.param.videoType='3'
				this.$request.post('video/list', this.queryForm).then(res => {
				  if(res.code ==200){
					  this.hotVideos=res.data.dataList;
					  this.queryForm.param.videoType=''
				  }
				})
				//推荐咨询
				this.$request.get('seek/getByType/2', this.queryForm).then(res => {
				  if(res.code ==200){
					  this.seekList=res.data;
					  
				  }
				})
			 
			},
			playVedio(videId){
		    this.videoContext = uni.createVideoContext(videId);
		    this.videoContext.requestFullScreen();
		},
		toPage(paths){
			uni.navigateTo({
				url: paths
			});
		},
			
		}
	}
</script>

<style>
	
	.shadow-div {
	  background-color: #fff;
	  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  border-radius: 16px; /* 圆角 */
	  display:flex; 
	  justify-content: space-around;
	      width: 56%;
	      height: 81%;
	}
 .myScoll {
   width: 100%;
   height: 250rpx;
   white-space: nowrap;
       display: ruby;
 }
 .myScoll .row{
   background-color: white;
   height: 220rpx;
   width: 800rpx;
   margin-top: 10rpx;
   margin-bottom: 10rpx;
   margin-left: 10rpx;
   display: inline-block;
 }

	.fui-color__white {
		background-color: white;
	}
	.fui-col__item {
		height: 84rpx;
		border-radius: 16rpx;
	}
	


	.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}
		.swiper {
			height: 300rpx;
		}
		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
		.video-container {
		  padding: 10px;
	
		  background-color: #fff;
		  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		  border-radius: 16px; /* 圆角 */
		  height: 300px;
		}
		.video-title {
		  color: black;
		  padding: 5px;
		  font-size: 16px;
		}
</style>
